<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Document</title>
</head>
<body>
    <!-- 
        计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
        这就意味着只要 message 还没有发生改变，多次访问 myComputed 计算属性会立即返回之前的计算结果，
        而不必再次执行函数

        函数则不同，每当触发重新渲染时，调用方法将总会再次执行函数。

        我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
        然后我们可能有其他的计算属性依赖于 A。 --（关键点，需要依赖）
        如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果使用了计算属性，那么调用一次的时候就会缓存下来
        
        如果你不希望有缓存，请用方法来替代。

        Vue会复制当前dom，然后存放在自己的虚拟dom中，只有真实dom和虚拟dom不同时，才会触发计算属性。
        这也就是为什么说 计算属性是基于它们的响应式依赖进行缓存的。

        使用场景：
            1.性能开销比较大
            2.搜索场景，每次搜索才会触发计算。响应变化比较大的场景

     -->

     <div id="app">
         {{message}}
         <br>
         <!-- 注意调用方式不同，computed 计算属性无需加 '()' -->
         时间：myMethod: {{myMethod()}}
        <br>
         时间：myComputed: {{myComputed}}
     </div>

</body>
</html>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue"
        },
        // 方法
        methods:{
            myMethod:function(){
                return Date.now()
            }
        },
        // 计算属性
        computed:{
            /*
                1.Vue特有的计算属性，结果保存在内存中，重复调用结果不变，已经缓存了
                2.调用时不需要加 '()'，是computed是调用属性
                3.该方法的名称不能与 methods中方法重名
            */
            myComputed:function(){
                this.message        // 只有相关响应式依赖发生改变时它们才会重新求值。
                                    // 注意,message为myComputed方法的一部分，所有二者有依赖关系
                return Date.now()   // 只计算一次，然后结果加入内存
            }
        }
    })

</script>